<template>
	<div class="review-content">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :submit="auditOne" />
		<div class="head">
			<span class="title">开启代理入口审核</span>
			<div v-if="showStatus(list)" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="success" @click="() => $refs.auditDialog.successOpen()">
					{{ $t('agent.audit_through') }}
				</el-button>
				<el-button type="danger" @click="() => $refs.auditDialog.dangerOpen()">
					{{ $t('agent.audit_reject') }}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">开启入口代理信息</p>
				<div class="review-flex">
					<div>
						{{ $t('agent.agent_account') }}:
						{{ list.userName || '-' }}
					</div>
					<div>
						{{ $t('agent.agent_type') }}:
						{{ typeFilter(list.accountType, 'accountType') }}
					</div>
					<div>
						注册时间：
						{{ list.registerDatetime || '-' }}
					</div>
					<div>
						风控层级：
						{{ list.windControlName || '-' }}
					</div>
					<div v-if="isTotalAgent">
						代理层级上限：
						{{ list.maxLevel}}
					</div>
					<div>
						{{ $t('common.belong_merchant') }}:
						{{ merchantFilter(list.merchantId) }}
					</div>
					<div>
						{{ $t('common.business_model') }}:
						{{ mappingBusinessModel(list.businessModel) || '-' }}
					</div>
					<div>
						代理层级/名称：{{ list.proxyLevel }}/{{ list.proxyLevelName || '-' }}
					</div>
					<div v-if="isTotalAgent && list.businessModel === 1">
						代理分润模式：
						{{ list.commissionMode === 2 ? '佣金模式' : '占成模式' }}
					</div>
				</div>
			</div>
			<div class="review-content" v-if="isTotalAgent && list.commissionMode > 0">
				<p class="name">比例信息</p>
				<div class="table-flex">
					<AgentRebates
						ref="AgentRebates"
						labelWidth="160px"
						:isEdit="false"
						:isOpenProxyAudit=" this.rowData.auditStatus !== 2"
						:openCommissionRateList="list.commissionRateList"
						:openMemberPlatform="list.memberRebateRate"
						:openProxyRebateRateList="list.proxyRebateRateList"
						:commissionModel="list.commissionMode"
						:queryCommissionRateParams="queryCommissionRateParams"
						:queryRebateRateParams="queryRebateRateParams"
					/>
				</div>
			</div>
			<div class="review-content" v-if="!isTotalAgent">
				<p class="name">上级代理信息</p>
				<div class="review-flex">
					<div>
						代理账号：
						{{ list.parentProxyName || '-' }}
					</div>
					<div>
						代理类型：
						{{ typeFilter(list.parentAccountType, 'accountType') }}
					</div>
					<div class="show-remark">
						注册时间：
						{{ list.parentRegisterDatetime }}
					</div>
					<div class="show-remark">
						风控层级：
						{{ list.parentWindControlName || '-' }}
					</div>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('agent.apply_info') }} </p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
					>
						<el-table-column
							align="center"
							label="开启入口权限代理"
						>
							<template>
								{{ list.userName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="同名会员转代"
						>
							<template>
								{{ list.memberTransformType === 0 ? '不转至同名代理下级' : '转至同名代理下级' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="review-flex">
					<div>
						{{ $t('agent.apply_people') }}:
						{{ list.applyName || '-' }}
					</div>
					<div>
						{{ $t('agent.apply_time') }}:
						{{ list.createdAt || '-' }}
					</div>
					<div class="show-remark">
						{{ $t('agent.apply_info') }}:
						{{ list.applyRemark || '-' }}
					</div>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('agent.audit_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('agent.audit_people') }}:
						{{ list.auditName || '-' }}
					</div>
					<div>
						{{ $t('agent.audit_time') }}:
						{{ list.auditDatetime || '-' }}
					</div>
					<div class="show-remark">
						{{ $t('agent.audit_remark') }}:
						{{ list.auditRemark || '-' }}
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			:title="$t('agent.submit_confirm')"
			center
			:visible.sync="visible"
			:before-close="closeFormDialog"
			:width="getWidth('610px')"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<el-form-item
					v-if="action"
					:label="$t('agent.submit_audit_info')"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					v-else
					:label="$t('agent.submit_audit_info')"
					prop="remark"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false">
					{{ $t('agent.cancel') }}
				</el-button>
				<el-button type="primary" @click="auditOne">
					{{ $t('agent.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="commission"
			class="rempadding"
			:visible.sync="commissionVisible"
		>
			<el-table
				:data="commissionContractList"
				border
				highlight-current-row
			>
				<el-table-column
					align="center"
					type="index"
					:label="$t('common.serial_number')"
					width="100"
				></el-table-column>
				<el-table-column
					prop="rebateRate"
					align="center"
					:label="$t('agent.rebate_rate')"
				>
					<template slot-scope="scope">
						{{ (scope.row.rebateRate * 100).toFixed(2) }}%
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					prop="netAmount"
					:label="$t('agent.agent_net_win_loss')"
				>
					<template slot-scope="scope">
						≥{{ scope.row.netAmount | filterDecimals }}
					</template>
				</el-table-column>
				<el-table-column
					prop="activeUsers"
					align="center"
					:label="$t('agent.month_active_people_number')"
				>
					<template slot-scope="scope">
						≥{{ scope.row.activeUsers }}
					</template>
				</el-table-column>
				<el-table-column
					prop="monthAddActiveCount"
					align="center"
					:label="$t('agent.month_active_people_new_add')"
				>
					<template slot-scope="scope">
						≥{{ scope.row.monthAddActiveCount }}
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog
			:title="rebateVisibleTitel"
			class="rempadding"
			:visible.sync="rebateVisible"
		>
			<el-table :data="rebateContractList" border>
				<el-table-column
					align="center"
					type="index"
					:label="$t('common.serial_number')"
					width="100"
				></el-table-column>
				<el-table-column
					prop="validBetAmount"
					align="center"
					:label="$t('agent.game_trade')"
				>
					<template slot-scope="scope">
						≥{{ scope.row.validBetAmount | filterDecimals }}
					</template>
				</el-table-column>
				<el-table-column
					prop="activeUsers"
					align="center"
					:label="$t('agent.active_people_number')"
				>
					<template slot-scope="scope">
						≥{{ scope.row.activeUsers }}
					</template>
				</el-table-column>
				<el-table-column
					prop="effecactiveUsers"
					align="center"
					:label="$t('agent.active_people_new_add')"
				>
					<template slot-scope="scope">
						≥{{ scope.row.effecactiveUsers }}
					</template>
				</el-table-column>
				<el-table-column
					prop="rebateRate"
					align="center"
					:label="$t('agent.rebate_rate3')"
				>
					<template slot-scope="scope">
						{{ (scope.row.rebateRate * 100).toFixed(2) }}%
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog
			:title="
				bankerType === 1
					? $t('agent.single_commission_system')
					: $t('agent.monthly_profit_policy')
			"
			class="rempadding"
			center
			:visible.sync="bankerVisible"
		>
			<el-table
				v-if="bankerType === 1"
				:data="bankerData"
				border
				highlight-current-row
			>
				<el-table-column
					align="center"
					type="index"
					:label="$t('common.serial_number')"
					width="100"
				></el-table-column>
				<el-table-column
					prop="venueName"
					align="center"
					:label="$t('agent.venue_name')"
				></el-table-column>
				<el-table-column
					prop="drawCommissionRate"
					align="center"
					:label="$t('agent.commission_rate')"
				>
					<template slot-scope="scope">
						{{ scope.row.drawCommissionRate }}%
					</template>
				</el-table-column>
			</el-table>
			<el-table v-else :data="bankerData" border>
				<el-table-column
					align="center"
					type="index"
					:label="$t('common.serial_number')"
					width="100"
				></el-table-column>
				<el-table-column
					prop="profitSharingRatio"
					align="center"
					:label="$t('agent.profit_ratio') + '（%）'"
				>
					<template slot-scope="scope">
						{{ decimalToMul2(scope.row.profitSharingRatio) }}%
					</template>
				</el-table-column>
				<el-table-column
					prop="gameLoss"
					align="center"
					:label="
						$t('agent.game_loss') + '（' + $t('agent.yuan') + '）'
					"
				>
					<template slot-scope="scope">
						≥{{ scope.row.gameLoss }}
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="bankerVisible = false">
					{{ $t('agent.close') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { getUsername, getUserInfo } from '@/utils/auth'
import AuditConfirm from '@/components/AuditConfirm'
import AgentRebates from '@/components/AgentRebates'

export default {
	components: {
		AuditConfirm,
		AgentRebates
	},
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		rowData: {
			type: Object,
			default: () => {}
		},
		commissionContract: {
			type: Array,
			default: () => []
		},
		rebateContract: {
			type: Array,
			default: () => []
		}
	},
	data() {
		this.auditOne = this.throttle(this.auditOne, 1000)

		return {
			list: {},
			form: {
				remark: ''
			},
			name: '',
			userInfo: {},
			visible: false,
			action: false,
			commissionVisible: false,
			rebateVisible: false,
			commission: '',
			rebateVisibleTitel: '',
			commissionContractList: [],
			rebateContractList: [],
			bankerType: 1,
			bankerVisible: false,
			bankerData: [],
			rebateRateData: {},
			commissionRateList: [],
			rebateRateList: [],
			rebateRateTemplateName: undefined
		}
	},
	computed: {
		formRules() {
			return {
				remark: [
					{
						required: true,
						message: this.$t('agent.rule_audit_tip'),
						trigger: 'blur'
					}
				]
			}
		},
		queryCommissionRateParams() {
			return {
				merchantId: this.rowData.merchantId,
				userId: this.rowData.userId,
				userName: this.rowData.userName,
				status: this.rowData.auditStatus !== 2 ? -1 : 1
			}
		},
		queryRebateRateParams() {
			return {
				merchantId: this.rowData.merchantId,
				userId: this.rowData.userId,
				userName: this.rowData.userName,
				status: this.rowData.auditStatus !== 2 ? -1 : 1,
				userType: this.list.commissionMode === 2 ? 2 : undefined
			}
		},
		isTotalAgent() {
            return this.rowData.proxyLevel === 0
        }
	},
	watch: {
		rowData(val) {
			this.getInfo(val)
		}
	},
	created() {
		this.name = getUsername()
		this.userInfo = getUserInfo()
		this.getInfo()
	},
	methods: {
		showStatus(row) {
			return (
				this.type &&
				(this.rowData.lockDatetime
					? +this.rowData.lockId === +this.userInfo.id
					: this.rowData.auditName === this.name)
			)
		},
		async queyrTemplateDetail() {
			try {
				const ret = await this.$api.getRebateRateTemplateDetail({
					userId: this.rowData.userId,
					userType: 1,
					queryType: 1,
					level: 1
				})

				if (ret.code === 200 && ret.data) {
					this.rebateRateTemplateName = ret.data[0].templateName
					this.rebateRateTemplateId = ret.data[0].templateId
				}
			} catch (err) {
				throw err
			}
		},
		checkBanker(val) {
			this.bankerData = []
			this.bankerType = val
			if (val === 1) {
				this.$api.proxyCommisionConfigPageList({}).then((res) => {
					if (res.code === 200) {
						this.bankerData = res.data.record || []
						this.bankerVisible = true
					}
				})
			} else {
				this.$api
					.profitPolicyConfigDetailApi({
						id: this.list.sharingPolicyId
					})
					.then((res) => {
						if (res.code === 200) {
							this.bankerData = res.data
							this.bankerVisible = true
						}
					})
			}
		},
		checkDeed(val, id) {
			if (val === 1) {
				this.commission = this.$t('agent.commission_contract')
				this.getProxyProxyDetailContract(val, id)
				this.commissionVisible = true
			} else {
				this.rebateVisibleTitel = this.$t('agent.rebate_contract')
				this.getProxyProxyDetailContract(val, id)
				this.rebateVisible = true
			}
		},
		// 佣金契约/返点契约
		getProxyProxyDetailContract(val, id) {
			const comId = { commissionContractId: id }
			const rebId = { rebateContractId: id }
			if (val === 1) {
				this.$api.getProxyProxyDetailContract(comId).then((res) => {
					if (res?.code === 200 && res.data) {
						this.commissionContractList =
							res.data.commissionResp || []
					}
				})
			} else {
				this.$api.getProxyProxyDetailContract(rebId).then((res) => {
					if (res?.code === 200 && res.data) {
						this.rebateContractList = res.data.rebateResp || []
					}
				})
			}
		},
		commissionPolicy(val) {
			if (val) {
				for (let i = 0; i < this.commissionContract.length; i++) {
					const obj = this.commissionContract[i]
					if (val * 1 === obj.id) {
						return obj.policyType
					}
				}
			} else {
				return '-'
			}
		},
		rebatePolicy(val) {
			if (val) {
				for (let i = 0; i < this.rebateContract.length; i++) {
					const obj = this.rebateContract[i]
					if (val * 1 === obj.id) {
						return obj.policyType
					}
				}
			} else {
				return '-'
			}
		},
		closeFormDialog() {
			this.visible = false
		},
		confirm(action) {
			this.remark = ''
			this.form.remark = ''
			this.action = action
			this.visible = true
		},
		auditOne(from) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})

			const params = {
				id: this.rowData.id,
				remark: from.remark,
				auditStatus: from.status
			}

			this.$api
				.openProxyAudit(params)
				.then((res) => {
					loading.close()
					if (res?.code === 200) {
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.visible = false
						this.goBack()
					} else {
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
				})
				.catch(() => {
					loading.close()
				})
		},
		goBack() {
			this.$emit('goBack')
		},
		getInfo(rowData = this.rowData) {
			const params = {
				id: rowData.id
			}
			this.$api.getOpenProxyDetail(params).then((res) => {
				if (res?.code === 200) {
					this.loading = false
					this.list = res.data
				} else {
					this.loading = false
					this.$message({
						message:
							res?.msg || this.$t('agent.interface_exceptions'),
						type: 'error'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.table-flex {
	display: flex;
	width: 80%;
	margin-top: 15px;
}
::v-deep .el-dialog__header {
	text-align: left;
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 15px 20px;
}
.review-content {
	width: 100%;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0px;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;
				div {
					display: inline-block;
					width: 32%;
					line-height: 30px;
				}
				.show-remark {
					word-wrap: break-word;
					vertical-align: top;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
}
</style>
